<template>
  <div class="suit" v-loading="loading">
    <el-form :model="form" ref="form" label-position="top" class="positionForm">
      <div style="display: flex">
        <el-form-item label="企划月份">
          <el-select v-model="form.pid" placeholder="请选择">
            <el-option
              v-for="item in layoutList"
              :key="item.id"
              :label="item.date"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套装名称" style="margin-left: 20px">
          <el-input
            v-model="form.title"
            placeholder="请输入套装名称"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 50px">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="onNewSuit" :disabled="!qxobj.add"
            >新建套装</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <div>
      <div>最终日期：{{ ddl }}</div>
      <div style="margin-top: 10px">
        项目状态：{{ final_status == 0 ? "进行中" : "已完成" }}
      </div>
      <el-table :data="tableData" border stripe style="margin-top: 30px">
        <template v-for="col in columns">
          <el-table-column
            v-if="col.id != 'status' && col.id != 's_status'"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="col.id == 's_status'"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center"
          >
            <template slot-scope="{ row }">
              <div>{{ row.s_status == 2 ? "已分配" : "未分配" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="col.id == 'status'"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            align="center"
          >
            <template slot-scope="{ row }">
              <div>
                {{
                  row.status == 2
                    ? "已完成"
                    : row.status == 1
                    ? "进行中"
                    : "未开始"
                }}
              </div>
            </template>
          </el-table-column>
        </template>

        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <div>
              <el-button
                type="text"
                size="default"
                @click="onEdit(row.id)"
                :disabled="!qxobj.save"
                >编辑</el-button
              >
              <el-button
                v-if="row.s_status != 2"
                type="text"
                size="default"
                style="color: red"
                @click="onDelete(row.id)"
                :disabled="!qxobj.del"
                >删除</el-button
              >
            </div>
            <div v-if="row.s_status != 2">
              <el-button
                type="text"
                size="default"
                @click="onAllocation(row.id, 0)"
                :disabled="!qxobj.save"
                >分配</el-button
              >
              <el-button
                type="text"
                size="default"
                @click="onAllocation(row.id, 1)"
                :disabled="!qxobj.save"
                >申请列表</el-button
              >
            </div>
            <div v-if="row.s_status == 2">
              <el-button
                type="text"
                size="default"
                @click="onAllocation(row.id, 3)"
                :disabled="!qxobj.save"
                >取消分配</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :form="form"
        :total="total"
        @paginationPostOrderTaskList="postApigetsuit"
      />
    </div>
    <distribution-List
      :distributionVisible="distributionVisible"
      :id="allocationId"
      @close="close"
      @postApigetsuit="postApigetsuit"
      :type="type"
      :identity="identity"
    />
  </div>
</template>

<script>
import pagination from "@/components/pagination.vue";
import distributionList from "@/components/DistributionList.vue";
import { postApisetcancel } from "@/api";
import {
  postApigetsuit,
  postApieditsuit,
  postApidelsuit,
  postApigetplanning,
} from "@/api";
export default {
  components: {
    pagination,
    distributionList,
  },
  data() {
    return {
      loading:false,
      qxobj: {},
      distributionVisible: false,
      allocationId: "",
      identity: 1,
      type: 0,
      form: {
        pid: "",
        title: "",
        page: 1,
        size: 10,
      },
      total: 0,
      columns: [
        {
          id: "title",
          label: "套装名称",
        },
        {
          id: "c_name",
          label: "品类",
        },
        {
          id: "dynasty_name",
          label: "形制",
        },
        {
          id: "price",
          label: "价格",
        },
        {
          id: "createtime",
          label: "创建时间",
        },
        {
          id: "s_status",
          label: "状态",
        },
        {
          id: "status",
          label: "项目进度",
        },
      ],
      tableData: [],
      layoutList: [],
      ddl: "",
      final_status: "",
    };
  },
  async activated() {
    this.qxobj = JSON.parse(this.$route.query.qxobj);
    let form = this.form;
    await this.postApigetplanning();
    await this.postApigetsuit(form);
  },
  methods: {
    // 查询
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      let from = this.form;
      this.postApigetsuit(from);
    },
    // 关闭弹窗
    close() {
      this.distributionVisible = false;
    },
    // 分配
    onAllocation(id, type) {
      if (type == 3) {
        postApisetcancel(id)
          .then((res) => {
            let from = this.form;
            this.postApigetsuit(from);
          })
          .catch((err) => {
            this.$message.warning(err.msg);
          });
      } else {
        this.type = type;
        this.allocationId = id;
        this.distributionVisible = true;
      }
    },
    // 新建套装
    onNewSuit() {
      this.$router.push("/newSuit");
    },
    // 企划列表
    async postApigetplanning() {
      this.loading = true
      await postApigetplanning().then((res) => {
        console.log("企划列表", res);
        this.form.pid = res.data[0].id;
        this.layoutList = res.data;
      });
      this.loading = false
    },
    // 套装列表
    async postApigetsuit(data) {
      if (data) {
        this.form = data;
      } else {
        data = this.form;
      }

      await postApigetsuit(data).then((res) => {
        this.tableData = res.data;
        this.ddl = res.ddl;
        this.final_status = res.final_status;
        this.total = Number(res.total);
      });
    },
    closeDialog() {
      this.form = { date: "", ddltime: "" };
    },
    // 删除
    onDelete(id) {
      this.$confirm("此操作将永久删除该套装, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postApidelsuit(id)
            .then((res) => {
              this.$message.success("删除成功");
              let from = this.form;
              this.postApigetsuit(from);
            })
            .catch((err) => {
              this.$message.warning(err.msg);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    onEdit(id) {
      this.$router.push({ path: "newSuit", query: { id } });
    },
    // 创建编辑套装
    onCreation() {
      this.loading = true;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = false;
          postApieditsuit(this.form)
            .then((res) => {
              console.log("编辑套装", res);
              if (this.form.id) {
                this.$message.success("编辑套装成功");
              } else {
                this.$message.success("新建套装成功");
              }
              let from = this.form;
              this.postApigetsuit(from);
              this.loading = false;
              this.dialogFormVisible = false;
              this.form = { date: "", ddltime: "" };
            })
            .catch((err) => {
              console.log("err", err);
              this.$message.warning(err.msg);
              this.loading = false;
            });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.suit {
  @include global-back;
}
</style>